<template>
  <div class="Register">
    <van-nav-bar title="注册" left-text="" left-arrow @click-left="$router.push('/')"/>
    <div class="registerMain">
      <van-field
          v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{required:true,message:'请填写手机号'},{pattern:/^1[3-9][0-9]{9}$/,message: '手机号格式输入错误'}]"

      />
      <van-field
          v-model="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="verificationBtn">{{ verificationText }}</van-button>
        </template>
      </van-field>
      <van-field v-model="password" type="password" label="密码" placeholder="密码(6位至16位)"
                 :rules="[{required:true,message:'请输入密码'},{pattern:/^1[3-9][0-9]{9}$/,message: '手机号格式输入错误'}]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="registerBtn">立即注册</van-button>
      </div>
      <div class="register-password">
        <span @click="$router.push('/')">去登录</span>
      </div>
      <van-divider
          :style="{ color: 'black', borderColor: 'black', padding: '0 16px' }">
        第三方登录
      </van-divider>
      <div class="otherLogin">
        <span class="iconfont icon-weixin weixin" @click="weiXinBtn"></span>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Register",
  data() {
    return {
      phone: null,//手机号
      sms: null,//验证码
      password: '',
      verificationText: '发送验证码',
      responseSms: ''
    }
  },
  mounted() {
  },
  methods: {
    //发送验证码
    verificationBtn() {
      if (this.phone) {
        this.$service.registerService.verification(this.phone).then(res => {
          if (res.status == 200) {
            this.verificationText = '验证码已发送';
            this.responseSms = res.data.captcha;
          }
        })
      }else {
        Toast.fail('请输入手机号');
      }
    },
    //注册按钮
    registerBtn() {
      if (this.sms == this.responseSms) {
        this.$service.registerService.registerUser(this.phone, this.password).then(res => {
          if (res.data.code == 200) {
            Toast.success('注册成功');
            this.$router.push('/registerMessage');
          } else {
            Toast.fail('注册失败，请稍后再试');
          }
        })
      } else {
        Toast.fail('验证码输入错误');
      }
    },
    weiXinBtn() {
      this.$dialog.alert({
        title: '第三方登录',
        message: '该功能暂未开放',
      }).then(() => {
        // on close
      });
    }
  }
}
</script>

<style scoped lang="less">
.Register{
  background-color: white;
}
.registerMain {
  margin-top: 25%;
  padding: 0 5%;
}

//第三方登录
.otherLogin {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weixin {
  color: #22D76E;
  font-size: 40px;
}
</style>
